<template>
  <div class="right-container flex-v flex-b g-card f1">
    <div class="card-brand border">问题反馈</div>
    <div class="f1">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="微信/手机号：" prop="phone">
          <el-input v-model="ruleForm.phone" class="transparent" />
        </el-form-item>
        <el-form-item label="问题反馈：" prop="comment">
          <el-input
            v-model="ruleForm.comment"
            resize="none"
            rows="15"
            type="textarea"
            class="transparent"
            style="max-width: 290px"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-c align-center">
      <el-button
        type="primary"
        size="small"
        @click="submit"
      >保存更改</el-button>
    </div>
  </div>
</template>
<script>
import { addFeedback } from '@/api/user'
export default {
  name: 'PersonalSetting',
  data() {
    const checkRequired = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('此项必填'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        phone: '',
        comment: ''
      },
      rules: {
        phone: [
          { required: true, trigger: 'blur', validator: checkRequired }
        ],
        comment: [
          { required: true, trigger: 'blur', validator: checkRequired }
        ]
      }
    }
  },
  methods: {
    async submit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await addFeedback(this.ruleForm)

          if (res.success) {
            this.$message.success(res.message)
            for (const key in this.ruleForm) {
              this.ruleForm[key] = ''
            }
          } else {
            this.$message.error(res.message)
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.right-container {
  box-sizing: border-box;
  .card-brand {
    margin-bottom: 26px;
  }
  .link {
    font-size: 20px;
    margin-left: 16px;
  }
  .btn-list {
    margin-top: 16px;
  }
  .transparent {
    width: 100%;
    max-width: 290px;
  }
}
</style>
